<html>
	
	<head>
            <meta charset="utf-8">
			<title>中国电信</title>
			<style>
			
			 #U li{ list-style: none; 
			 	float: left;
			 	width: 100px;
			 	height: 25px;
			 	border: green solid 1px;
			 	position: relative;}
             #U li a{ text-decoration: none;
                   display: block;
                   color: green;
                   text-align: center;
               }
             #U1{ position: absolute;
             left: -41px;
             top: 25px;
             display: none; }
             #U2{ position: absolute;
             left: -41px;
             top: 25px;
             display: none; }
			</style>
	</head>
	<body>		      
	        <div id="ad">
				<div class="top">
					<ul id="U">
						<li><a href="">首页</a></li>
						<li><a href="">手机</a>
                           <ul id="U1">
	                           	<li>诺基亚</li>
	                           	<li>iphone</li>
                           </ul>
						</li>
						<li><a href="">宽带光纤</a>
							<ul id="U2">
								<li>100M</li>	
								<li>50M</li>
							</ul>
						</li>
						<li><a href="">老用户</a></li>
						<li><a href="">自助服务</a></li>
						<li><a href="">同城惠</a></li>
					</ul>
				</div>
				<div class="main"></div>
				<div class="foot"></div>
			</div>
	</body>
</html>
<script>
    var node = document.getElementById('U')
	
       for(i=0;i<node.children.length;i++){
       	//var node0=node.getElementsByTagName('ul')
       	node.children[i].onmouseover=function(){
       		var nod=this.getElementsByTagName('ul');
       		// this.style.display="block"
       		// i=node.children[i][index]
       		 nod[0].style.display="block";
        };

       	node.children[i].onmouseout = function(){

        var nod = this.getElementsByTagName('ul');
             nod[0].style.display="none";
        };
       	}
	
</script>



